<template>
  <div class="shop-container">
    <!-- 顶部子导航 -->
    <el-menu
      :default-active="$route.path"
      mode="horizontal"
      class="sub-menu"
      @select="handleSubSelect"
    >
      <el-menu-item index="/shop/products">商品列表</el-menu-item>
      <el-menu-item index="/shop/cart">购物车</el-menu-item>
    </el-menu>

    <!-- 内容区域 -->
    <router-view class="content-area" />

    <!-- 底部固定操作栏 -->
    <div class="footer-bar">
      <el-button type="text" @click="$router.back()">返回</el-button>
      <span>当前位置：{{ $route.name }}</span>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const handleSubSelect = (key) => {
  router.push(key).catch(err => {
    if (!err.message.includes('Avoided redundant navigation')) throw err
  })
}
</script>

<style scoped>
.shop-container {
  padding: 20px;
}

.sub-menu {
  margin: 20px 0;
  border-bottom: 2px solid #f5f7fa;
}

.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: white;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}
</style>
